﻿@model Easy.CMS.List.ViewModel.ListTopsViewModel
@using Easy.Web.CMS.Data;
@{
    Script.Reqiured("List").AtHead();

    if (!Model.Widget.DetailPageUrl.IsNullOrEmpty())
    {
        Model.Widget.DetailPageUrl = Url.Content(Model.Widget.DetailPageUrl);
    }
}

<script>
    $(function () {
        var shortWidth = $(".media-list").width() - 10;
        $(".shorttext").css("width", shortWidth + "px");
    })
    @*
    $(function () {
        var _listId = '@Model.Widget.ListId';
        var _formCode = 'ListMobileField';
        var data = @Html.Raw(@Model.JsonResult);

        if (_listId && _listId.length > 0) {
            var d = [{ "Id": "", "opt": "select", "name": _formCode },
             { "item": { "Name": "list_id", "Operation": "eq", "Value": _listId, "ValueType": "string" } }];
            doajaxasync("@Urls.ApiHost/api/mp/list/findfirst", d, false, function (b) {
                $("#listtops .list-group").empty();
                if (b && b.length > 0) {
                    b = JSON.parse(b);
                    if (b) {
                        var displays = b.display_field;
                        if (displays && displays.length > 0) {
                            var cols = JSON.parse(displays);
                            if (cols && cols.length > 0) {
                                // 遍历数据
                                if (data && data.length) {
                                    var html = "";
                                    $.each(data,function(idx,item){
                                        var Id = item["Id"];
                                        var detailUrl = '@Model.Widget.DetailPageUrl';
                                        var url = canonical_uri(detailUrl+'/list-'+ Id);
                                        html += '<a class="list-group-item" href="'+ url +'" target="_blank">';

                                        for(var i =0; i<cols.length;i++){
                                            var col = cols[i];
                                            var val = item[col.code];
                                            if (col.show == 'No1') {
                                                html += "<h4 class='list-group-item-heading'>" + val + "</h4>";
                                            } else if (col.show == 'No2') {
                                                val = cutstr(val,100);
                                                html += '<p class="list-group-item-text">' + val + '</p>';
                                            }
                                        }
                                        html += '</a>';
                                    });
                                    $("#listtops .list-group").append(html);
                                }
                            }
                        }
                    }
                }
            });
        }
    });*@
</script>

<div id="listtops" class="listtops">
    <div class="list-group">
        @if (!Model.JsonResult.IsNullOrEmpty() && Model.Columns != null && Model.Columns.Count > 0)
        {
            var data = Json.Decode(Model.JsonResult);
            foreach (var item in data)
            {
                string Id = item["Id"].ToString();
                string content = !Model.Columns[1].IsNullOrEmpty() ? @item[Model.Columns[1]] : string.Empty;
                
                <a class="list-group-item" href="@Url.PathContent(Url.ListDetailUrl(Model.Widget.DetailPageUrl, Id))" target="_blank">
                    <h4 class="list-group-item-heading">
                        @if (!Model.Columns[0].IsNullOrEmpty())
                        {
                            @item[Model.Columns[0]]
                        }
                    </h4>
                    <div @*class="shorttext" style="overflow-x: hidden;text-overflow: ellipsis;white-space: nowrap;"*@>
                        <p class="list-group-item-text">
                             @content.ParseTags().GetSubString(Convert.ToInt32(@Model.Widget.ItemLength))
                        </p>
                    </div>
                </a>
            }
        }
    </div>
</div>

